<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>UIkit中文网</title>
<meta name="description" content="UIkit是YOOtheme团队开发的一款轻量级、模块化的前端框架，可快速构建强大的前端web界面。UIKit使用的变量基于LESS，具有体积小、模块化、可轻松地自定义主题及响应式设计可在多种环境中使用等特点。UIkit中文网为广大国内开发者提供详尽的中文文档、代码实例等，帮助开发者快速掌握并使用这一框架。">
<meta name="author" content="UIkit中文网">
 
<meta name="keywords" content="UIkit,轻量级,前端框架,响应式布局,基于LESS,CSS framework,js框架,getuikit,uikit开发,uikit代码,uikit入门">
        <link rel="shortcut icon" href="docs/images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="docs/images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="docs/css/uikit.docs.min.css">
        <link rel="stylesheet" href="docs/css/docs.css">
        <link rel="stylesheet" href="vendor/highlight/highlight.css">
        <script src="vendor/jquery.js"></script>
        <script src="docs/js/uikit.min.js"></script>
        <script src="vendor/highlight/highlight.js"></script>
        <script src="docs/js/docs.js"></script>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="index.html"><img class="uk-margin uk-margin-remove" src="docs/images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="docs/documentation_get-started.html">开始使用</a></li>
                    <li><a href="docs/core.html">核心组件</a></li>
                    <li><a href="docs/components.html">附加组件</a></li>
                    <li><a href="docs/customizer.html">定制工具</a></li>
                    <li><a href="showcase/index.html">案例展示</a></li>
                    <li><a href="docs/tutorials.html">视频教程</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="docs/images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-section tm-section-color-1 tm-section-colored">
            <div class="uk-container uk-container-center uk-text-center">

                <img class="tm-logo" src="docs/images/logo_uikit_large.svg" width="281" height="217" title="UIkit" alt="UIkit">

                <p class="uk-text-large">一款轻量级、模块化的前端框架<br class="uk-hidden-small"> 可快速构建强大的web前端界面</p>

                <a class="uk-button tm-button-download" href="download/uikit-2.25.0.zip">下载 UIkit</a>
                <ul class="tm-subnav uk-subnav uk-flex-center">
                    <li><a href="https://github.com/uikit/uikit" rel="nofollow">GitHub</a></li>
                    <li><a href="docs/documentation_get-started.html">开始使用</a></li>
                    <li data-uikit-version></li>
                </ul>

                <ul class="tm-subnav uk-subnav uk-flex-center">
                    <li><a href="https://github.com/uikit/uikit/stargazers" rel="nofollow"><i class="uk-icon-star"></i> <span data-uikit-stargazers>4242</span> Stargazers</a></li>
                    <li><a href="https://github.com/uikit/uikit/network" rel="nofollow"><i class="uk-icon-code-fork"></i> <span data-uikit-forks>787</span> Forks</a></li>
                    <li><a href="https://segmentfault.com/t/uikit" target="_blank" rel="nofollow"><i class="uk-icon-comments"></i> 讨论区</a></li>
                    <li><i class="uk-icon-qq" style="color:#fff;"></i>QQ群:299654266</li>
                </ul>

            </div>
        </div>

        <div class="tm-section tm-section-color-2 tm-section-colored">
            <div class="uk-container uk-container-center uk-text-center">

                <h1 class="uk-heading-large">特点</h1>

                <p class="uk-text-large">UIKit为您提供了全面的HTML、CSS及JS组件，<br class="uk-hidden-small"> 它们使用简单，容易定制和扩展。</p>

                <div class="uk-grid" data-uk-grid-margin>

                    <div class="uk-width-medium-1-4">
                        <div class="uk-panel">
                            <img class="tm-image-pull" src="docs/images/icon_less.svg" width="200" height="140" alt="LESS">
                            <h2 class="uk-margin-top-remove">LESS</h2>
                            <p>UIkit 基于 <a href="http://www.lesscss.net" target="_blank" rel="nofollow">LESS</a> 开发，代码结构清晰简单，易于扩展和维护。</p>
                        </div>
                    </div>

                    <div class="uk-width-medium-1-4">
                        <div class="uk-panel">
                            <img class="tm-image-pull" src="docs/images/icon_components.svg" width="200" height="140" alt="Components">
                            <h2 class="uk-margin-top-remove">组件</h2>
                            <p>体积小、反应灵敏的响应式组件，使用一致的、无冲突的命名规则。</p>
                        </div>
                    </div>

                    <div class="uk-width-medium-1-4">
                        <div class="uk-panel">
                            <img class="tm-image-pull" src="docs/images/icon_themes.svg" width="200" height="140" alt="Themes">
                            <h2 class="uk-margin-top-remove">定制</h2>
                            <p>可根据 UIKit 基本的风格及样式，轻松地自定义创建出自己喜欢的主题样式。</p>
                        </div>
                    </div>

                    <div class="uk-width-medium-1-4">
                        <div class="uk-panel">
                            <img class="tm-image-pull" src="docs/images/icon_responsive.svg" width="200" height="140" alt="Responsive">
                            <h2 class="uk-margin-top-remove">响应式</h2>
                            <p>根据不同的屏幕分辨率与上网设备，UIKit 会自动做出响应，提供一致的体验。</p>
                        </div>
                    </div>

                </div>

            </div>
        </div>

        <div class="tm-section tm-section-color-white">
            <div class="uk-container uk-container-center uk-text-center">

                <h1 class="tm-margin-large-bottom">UIkit相关资源</h1>

                <div class="uk-grid tm-grid-margin-large" data-uk-grid-match="{target:'.uk-panel'}" data-uk-grid-margin>

                    <div class="uk-width-medium-1-3">
                        <a class="uk-panel tm-panel-link" href="http://getuikit.net/warp/" >
                            <div class="tm-icon"><img src="http://getuikit.net/warp/images/logo2.svg"/></div>
                            <h2>Warp 主题框架</h2>
                            <p>一款快速和简洁的主题框架，它提供了丰富的工具集，用于开发跨平台的主题</p>
                        </a>
                    </div>

                    <div class="uk-width-medium-1-3">
                        <a class="uk-panel tm-panel-link" href="http://www.pagekit.com/" rel="nofollow" target="_blank">
                            <div class="tm-icon"><img src="dist/img/pagekit-logo-contrast.svg"/></div>
                            <h2>Pagekit</h2>
                            <p>一款全新的现代CMS，用于创作和分享</p>
                        </a>
                    </div>

                    <div class="uk-width-medium-1-3">
                        <a class="uk-panel tm-panel-link" href="http://slimphp.net/" target="_blank">
                            <div class="tm-icon"><img src="http://slimphp.net/assets/images/favicon.png"/></div>
                            <h2>Slim 框架</h2>
                            <p>Slim是一款 PHP 微框架，可以帮助你快速编写简单但功能强大的 web 应用和 API 。</p>
                        </a>
                    </div>

                </div>

            </div>
        </div>

        <div class="tm-section tm-section-color-2 tm-section-colored">
            <div class="uk-container uk-container-center uk-text-center">

                <h1 class="uk-heading-large uk-margin-bottom-remove">开放源码</h1>

                <p class="uk-text-large">UIKit 是一款开源的前端UI界面框架，<br class="uk-hidden-small"> 你可以无任何限制的使用 UIKit 来创建自己的风格。</p>

                <div class="uk-grid uk-grid-divider" data-uk-grid-margin>

                    <div class="uk-width-1-1 uk-width-medium-1-3">
                        <div class="uk-panel">
                            <h2>MIT 许可协议</h2>
                            <p>UIkit 是基于MIT许可协议的开源项目。它完全免费，你可以无任何限制的使用、复制、合并、发布及分发这个框架。</p>
                        </div>
                    </div>

                    <div class="uk-width-medium-1-3">
                        <div class="uk-panel">
                            <h2>我们的英雄</h2>
                            <p>非常感谢 LESS、jQuery、normalize.css及FontAwesome，没有这些强大的开源项目就不可能有UIkit。</p>
                        </div>
                    </div>

                    <div class="uk-width-medium-1-3">
                        <div class="uk-panel">
                            <h2>积极的开发</h2>
                            <p>UIkit 由 <a href="http://www.yootheme.com" target="_blank" rel="nofollow">YOOtheme</a> 团队建造，YOOtheme 通过丰富的经验创建着 Joomla 和 WordPress 主题，并支持着 <a href="http://www.yootheme.com/themes/warp-framework" target="_blank" rel="nofollow">Warp theme framework</a> 项目。</p>
                        </div>
                    </div>

                 </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line uk-flex-center">
                    <li><a href="http://github.com/uikit/uikit" rel="nofollow">GitHub</a></li>
                    <li><a href="http://github.com/uikit/uikit/issues" rel="nofollow">反馈</a></li>
                    <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md" rel="nofollow">更新日志</a></li>
                    <li><a href="https://twitter.com/getuikit" rel="nofollow">官方Twitter</a></li>
                     
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com" rel="nofollow">YOOtheme</a> with love and caffeine.<br class="uk-hidden-small">Licensed under <a href="http://opensource.org/licenses/MIT" rel="nofollow">MIT license</a>.<br>由<a href="http://www.getuikit.net/">UIkit中文网</a>翻译</p>
                    <a href="index.html"><img src="docs/images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">

            <div class="uk-offcanvas-bar">

                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{ multiple: true }">
                    <li class="uk-parent"><a href="#">UIkit 中文文档</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/documentation_get-started.html">开始使用</a></li>
                            <li><a href="docs/documentation_how-to-customize.html">如何定制</a></li>
                            <li><a href="docs/documentation_layouts.html">布局示例</a></li>
                            <li><a href="docs/core.html">核心组件</a></li>
                            <li><a href="docs/components.html">附加组件</a></li>
                            <li><a href="docs/documentation_project-structure.html">项目结构</a></li>
                            <li><a href="docs/documentation_less-sass.html">Less & Sass 文件</a></li>
                            <li><a href="docs/documentation_create-a-theme.html">创建主题</a></li>
                            <li><a href="docs/documentation_create-a-style.html">创建样式</a></li>
                            <li><a href="docs/documentation_customizer-json.html">Customizer.json</a></li>
                            <li><a href="docs/documentation_javascript.html">JavaScript</a></li>
                            <li><a href="docs/documentation_custom-prefix.html">自定义前缀</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Core</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> 默认</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/base.html">基础</a></li>
                            <li><a href="docs/print.html">打印</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i>布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/grid.html">网格</a></li>
                            <li><a href="docs/panel.html">面板</a></li>
                            <li><a href="docs/block.html">块</a></li>
                            <li><a href="docs/article.html">文章</a></li>
                            <li><a href="docs/comment.html">评论</a></li>
                            <li><a href="docs/utility.html">效果</a></li>
                            <li><a href="docs/flex.html">Flex</a></li>
                            <li><a href="docs/cover.html">覆盖</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i>导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/nav.html">导航菜单</a></li>
                            <li><a href="docs/navbar.html">导航栏</a></li>
                            <li><a href="docs/subnav.html">二级导航</a></li>
                            <li><a href="docs/breadcrumb.html">面包屑</a></li>
                            <li><a href="docs/pagination.html">分页</a></li>
                            <li><a href="docs/tab.html">选项卡</a></li>
                            <li><a href="docs/thumbnav.html">缩略图导航</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-check"></i>页面元素</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/list.html">列表</a></li>
                            <li><a href="docs/description-list.html">描述列表</a></li>
                            <li><a href="docs/table.html">表格</a></li>
                            <li><a href="docs/form.html">表单</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/button.html">按钮</a></li>
                            <li><a href="docs/icon.html">图标</a></li>
                            <li><a href="docs/close.html">关闭</a></li>
                            <li><a href="docs/badge.html">徽章</a></li>
                            <li><a href="docs/alert.html">提示框</a></li>
                            <li><a href="docs/thumbnail.html">缩略图</a></li>
                            <li><a href="docs/overlay.html">遮罩</a></li>
                            <li><a href="docs/text.html">文本</a></li>
                            <li><a href="docs/column.html">列</a></li>
                            <li><a href="docs/animation.html">动画</a></li>
                            <li><a href="docs/contrast.html">对比度</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i>JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/dropdown.html">下拉菜单</a></li>
                            <li><a href="docs/modal.html">模态对话框</a></li>
                            <li><a href="docs/offcanvas.html">抽屉</a></li>
                            <li><a href="docs/switcher.html">切换器</a></li>
                            <li><a href="docs/toggle.html">拨动</a></li>
                            <li><a href="docs/scrollspy.html">滚动监听</a></li>
                            <li><a href="docs/smooth-scroll.html">平滑滚动</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">附加组件</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i>布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/grid-js.html">动态网格</a></li>
                            <li><a href="docs/grid-parallax.html">视差网格</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i>导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/dotnav.html">圆点导航</a></li>
                            <li><a href="docs/slidenav.html">滑动导航</a></li>
                            <li><a href="docs/pagination-js.html">动态分页</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/form-advanced.html">高级表单</a></li>
                            <li><a href="docs/form-file.html">文件表单</a></li>
                            <li><a href="docs/form-password.html">密码表单</a></li>
                            <li><a href="docs/form-select.html">选择表单</a></li>
                            <li><a href="docs/placeholder.html">占位符</a></li>
                            <li><a href="docs/progress.html">进度条</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i>JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/lightbox.html">灯箱</a></li>
                            <li><a href="docs/autocomplete.html">自动完成</a></li>
                            <li><a href="docs/datepicker.html">日期选择器</a></li>
                            <li><a href="docs/htmleditor.html">HTML 编辑器</a></li>
                            <li><a href="docs/slider.html">滚动条</a></li>
                            <li><a href="docs/slideset.html">滑块集</a></li>
                            <li><a href="docs/slideshow.html">幻灯片</a></li>
                            <li><a href="docs/parallax.html">视差</a></li>
                            <li><a href="docs/accordion.html">手风琴</a></li>
                            <li><a href="docs/notify.html">通知</a></li>
                            <li><a href="docs/search.html">搜索</a></li>
                            <li><a href="docs/nestable.html">可嵌套</a></li>
                            <li><a href="docs/sortable.html">可排序</a></li>
                            <li><a href="docs/sticky.html">附着</a></li>
                            <li><a href="docs/timepicker.html">时间选择器</a></li>
                            <li><a href="docs/tooltip.html">工具提示</a></li>
                            <li><a href="docs/upload.html">上传</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="showcase/index.html">案例展示</a></li>
                    <li><a href="docs/tutorials.html">视频教程</a></li>
                </ul>

            </div>

        </div>
        <script>

            $.ajax({
                dataType : "jsonp",
                url      : "https://api.github.com/repos/uikit/uikit?callback=ukghapi&nocache="+Math.random(),
                success  : function(data){

                    if(!data) return;

                    if(data.data.watchers){
                        $("[data-uikit-stargazers]").html(data.data.watchers);
                    }

                    if(data.data.forks){
                        $("[data-uikit-forks]").html(data.data.forks);
                    }
                }
            });
        </script>
    </body>
</html>
